<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Twitter Timeline Widget</title>

	<!-- Required-->
	<link href="css/timeline.css" rel="stylesheet" type="text/css"/>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery.widget.min.js"></script>
	<script src="js/timeline.js"></script>

</head>
<body style="margin: 0;">
<div id="container" style="">

	<div id="header" style="background-color:#FFA500;">
		<h1 style="margin-bottom:0;">Twitter Timeline Widget</h1></div>

	<div id="menu" style="background-color:#fcfbfe;width:25%;float:left;">
		<fieldset>
			<legend>Configuration & Options</legend>
			<div>
				<div style="margin: 5px;">
					<label>FeedUrl:
						<input type="text" id="dataFeedUrl"
							   value="http://smb.cdnak.md.neulion.com/u/univisiondeportes/feeds/twitter/mexico/2015/219295_es.js">
					</label>
					<button onclick="valueOnChange()">OK</button>
				</div>
				<div style="margin: 5px;">
					<label>ShowComment &nbsp; :
						<label><input type="radio" name="showComment" value="true" checked="checked"
									  onchange="valueOnChange()">Show</label>
						<label><input type="radio" name="showComment" value="false"
									  onchange="valueOnChange()">Hide</label>
					</label>
				</div>
				<div style="margin: 5px;">
					<label>
						CommentPosition:
						<label><input type="radio" name="commentPosition" value="top" checked="checked"
									  onchange="valueOnChange()">top</label>
						<label><input type="radio" name="commentPosition" value="bottom" onchange="valueOnChange()">bottom</label>
					</label>

				</div>
				<div style="margin: 5px;">
					<label>
						showTwBtnIcon &nbsp;:
						<label><input type="radio" name="showTwBtnIcon" value="true" checked="checked"
									  onchange="valueOnChange()">Show</label>
						<label><input type="radio" name="showTwBtnIcon" value="false"
									  onchange="valueOnChange()">Hide</label>
					</label>
				</div>
				<div style="margin: 5px;">
					<label>
						showTwBtnText &nbsp;:
						<label><input type="radio" name="showTwBtnText" value="true" checked="checked"
									  onchange="valueOnChange()">Show</label>
						<label><input type="radio" name="showTwBtnText" value="false"
									  onchange="valueOnChange()">Hide</label>
					</label>
				</div>
				<div style="margin: 5px;">
					<label>
						twBtnPosition &nbsp;:
						<label><input type="radio" name="twBtnPosition" value="left" checked="checked"
									  onchange="valueOnChange()">left</label>
						<label><input type="radio" name="twBtnPosition" value="right"
									  onchange="valueOnChange()">right</label>
					</label>
				</div>
				<div style="margin: 5px;">
					<label>
						refresh:
						<input type="text" id="refreshInterval" value="60" style="text-align: right">s
					</label>
					<button onclick="valueOnChange()">OK</button>
				</div>
				<div style="margin: 5px;">
					<label>
						lang:
						<label><input type="radio" name="lang" value="en" checked="checked" onchange="valueOnChange()">en</label>
						<label><input type="radio" name="lang" value="es" onchange="valueOnChange()">es</label>
					</label>
				</div>
			</div>
		</fieldset>

	</div>

	<div id="content" style="background-color:#EEEEEE;width:65%;height: 300px;float:left;">
		<div id="twitterTimeline"></div>
	</div>
	<div style="width: 10%;float:left">
		123
		456
		789
	</div>

	<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
		Copyright © gyx8899
	</div>

</div>

<script>
	var timelineDiv = $("#twitterTimeline");
	//	Normal
	var feedUrl = "http://smb.cdnak.md.neulion.com/u/univisiondeportes/feeds/twitter/mexico/2015/219295_es.js";
	//	var feedUrl = "http://solr-qa.neulion.com:8082/twitter/get?gameId=8949&lang=en&callback=twitterCallback";
	//  status code 200, no tweets;
	//		var feedUrl = "http://172.16.1.142:8081/219294_es.js";
	//	status code 404, no tweets;
	//		var feedUrl = "http://solr-qa.neulion.com:8082/twitter/get?gameId=8944&lang=en&callback=twitterCallback";
	var myTimeline = timelineDiv.timeline({
		dataFeedUrl: feedUrl
	});

	function valueOnChange() {
		var dataFeedUrlValue = $("input[id='dataFeedUrl']");
		var showCommentValue = $("input[name='showComment']:checked");
		var commentPositionValue = $("input[name='commentPosition']:checked");
		var showTwBtnIconValue = $("input[name='showTwBtnIcon']:checked");
		var showTwBtnTextValue = $("input[name='showTwBtnText']:checked");
		var twBtnPositionValue = $("input[name='twBtnPosition']:checked");
		var refreshIntervalValue = $("input[id='refreshInterval']");
		var langValue = $("input[name='lang']:checked");
		var content = $("#content");

		// Method to Clear, 1 or 2
		// Method 1
//		content.empty();
//		content.html("<div id=\"twitterTimeline\"></div>");

		// Method 2 ,
		myTimeline.timeline("destroy");

		$("#twitterTimeline").timeline({
			dataFeedUrl: dataFeedUrlValue.val(),
			showComment: (showCommentValue.val() == "true"),
			commentPosition: commentPositionValue.val(),
			showTwBtnIcon: (showTwBtnIconValue.val() == "true"),
			showTwBtnText: (showTwBtnTextValue.val() == "true"),
			twBtnPosition: twBtnPositionValue.val(),
			refreshInterval: parseInt(refreshIntervalValue.val()), // unit: s
			lang: langValue.val() //eg. en, es;
		});

	}

</script>
</body>
</html>